<template>
  <h1>Home View</h1>
  <n-form ref="formRef" inline :label-width="80" :model="formValue" :rules="rules">
    <n-form-item label="Name" path="user.name">
      <n-input v-model:value="formValue.user.name" placeholder="Input Name" />
    </n-form-item>
    <n-form-item label="Age" path="user.age">
      <n-input v-model:value="formValue.user.age" placeholder="Input Age" />
    </n-form-item>
    <n-form-item label="Adress" path="user.address">
      <n-input v-model:value="formValue.user.address" placeholder="Input Address" />
    </n-form-item>
    <n-form-item label="Phone" path="phone">
      <n-input v-model:value="formValue.phone" placeholder="Phone Number" />
    </n-form-item>
    <n-form-item>
      <n-button @click="handleValidateClick"> Validate </n-button>
    </n-form-item>
  </n-form>
  <n-space>
    <n-button>Default</n-button>
    <n-button type="tertiary"> Tertiary </n-button>
    <n-button type="primary"> Primary </n-button>
    <n-button type="info"> Info </n-button>
    <n-button type="success"> Success </n-button>
    <n-button type="warning"> Warning </n-button>
    <n-button type="error"> Error </n-button>
  </n-space>
  <n-tree block-line :data="options" :override-default-node-click-behavior="override" />
</template>

<script lang="ts" setup>
import { useMessage, NConfigProvider } from 'naive-ui'
import type { FormInst, FormItemRule, TreeOverrideNodeClickBehavior } from 'naive-ui'

const formRef = ref<FormInst | null>(null)
const message = useMessage()
const formValue = ref({
  user: {
    name: 'name',
    age: '15',
    address: '0',
  },
  phone: '1251550092',
})

const rules = {
  user: {
    name: {
      required: true,
      trigger: 'blur',
      validator: (rule: FormItemRule, value: string) => {
        return new Promise<void>((resolve, reject) => {
          if (value !== 'testName') {
            reject(new Error('非正确名字')) // reject with error message
          } else {
            resolve()
          }
        })
      },
    },
    age: {
      required: true,
      trigger: 'input',
      validator: (rule: FormItemRule, value: number) => {
        return new Promise<void>((resolve, reject) => {
          setTimeout(() => {
            if (value <= 16) {
              reject(new Error('非正确年龄'))
            } else {
              resolve()
            }
          }, 3000)
        })
      },
    },
  },
  phone: {
    required: true,
    trigger: ['input'],
    validator: (rule: FormItemRule, value: string) => {
      return /^[1]+[3,8]+\d{9}$/.test(value)
    },
  },
}

function handleValidateClick(e: MouseEvent) {
  e.preventDefault()
  const messageReactive = message.loading('Verifying', {
    duration: 0,
  })
  formRef.value?.validate((errors) => {
    if (!errors) {
      message.success('Valid')
    } else {
      message.error('Invalid')
      console.log('errors', errors)
    }
    messageReactive.destroy()
  })
}

const override: TreeOverrideNodeClickBehavior = ({ option }) => {
  if (option.children) {
    return 'toggleExpand'
  }
  return 'default'
}

const options = [
  {
    label: 'Folder-1',
    key: 'Folder-1',
    children: [
      {
        label: 'File-1-1',
        key: 'File-1-1',
      },
      {
        label: 'Folder-1-2',
        key: 'Folder-1-2',
        children: [
          {
            label: 'File-1-2-1',
            key: 'File-1-2-1',
          },
          {
            label: 'File-1-2-2',
            key: 'File-1-2-2',
          },
        ],
      },
    ],
  },
  {
    label: 'Folder-2',
    key: 'Folder-2',
    children: [
      {
        label: 'File-2-1',
        key: 'File-2-1',
      },
      {
        label: 'File-2-2',
        key: 'File-2-2',
      },
    ],
  },
]
</script>

<style lang="less" scoped></style>
